<template>
	<view>
		<view class="p-b-10 p-l-10 p-r-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">装车点车辆情况</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="carInfo" :chartData="carInfoData" />
					</view>
				</u-collapse-item>
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">装车列表</text></view>
					</template>
					<uni-table stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100">车牌</uni-th>
							<uni-th width="70">名称</uni-th>
							<uni-th width="70">状态</uni-th>
							<uni-th width="70">等待时间</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list" :key="index">
							<uni-td>{{item.carId}}</uni-td>
							<uni-td>{{item.name}}</uni-td>
							<uni-td>
								<text v-if="item.status" style="color: green;">运行中</text>
								<text v-else style="color: red;">停运</text>
							</uni-td>
							<uni-td>{{item.waitTime}}</uni-td>
						</uni-tr>
					</uni-table>
				</u-collapse-item>
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">装车点视频监控</text></view>
					</template>
				</u-collapse-item>
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">车辆监测</text></view>
					</template>
					<uni-table stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100">名称</uni-th>
							<uni-th width="70">类型</uni-th>
							<uni-th width="70">编号</uni-th>
							<uni-th width="70">等待时间</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list1" :key="index">
							<uni-td>{{item.name}}</uni-td>
							<uni-td>{{item.type}}</uni-td>
							<uni-td>{{item.code}}</uni-td>
							<uni-td>
								<text v-if="item.waitTime" style="color: green;">正常</text>
								<text v-else style="color: red;">超时</text>
							</uni-td>
						</uni-tr>
					</uni-table>
				</u-collapse-item>
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">装车数据统计</text></view>
					</template>
					<up-tabs lineWidth="50" :list="[{name:'近一周'},{name:'近30天'},{name:'近一年'}]" @click="(row)=>{
						console.log(row)
						const data = [
							{categories: ['一','二','三','四','五','六','日'],series: [350,360,310,660,330,130,340]},
							{categories: ['1','2','3','4','5','6','7'],series: [350,360,310,660,330,130,340]},
							{categories: ['1.1','1.2','1.3','1.4','1.5','1.6','1.7'],series: [350,360,310,660,330,130,340]},
						]
						carInfoData1.categories = data[row.index].categories;
						carInfoData1.series[0].data = data[row.index].series
					}"></up-tabs>
					<view class="charts-box" style="max-height: 400rpx;">
						<qiun-data-charts type="column" :opts="carInfo1" :chartData="carInfoData1" />
					</view>
				</u-collapse-item>
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">装车方量统计</text></view>
					</template>
					<up-tabs lineWidth="50" :list="[{name:'近一周'},{name:'近30天'},{name:'近一年'}]" @click="()=>{}"></up-tabs>
					<view class="charts-box" style="max-height: 400rpx;">
						<qiun-data-charts type="line" :opts="carInfo2" :chartData="carInfoData2" />
					</view>
				</u-collapse-item>
				<u-collapse-item name="1" class="m-t-10">
					<template #title>
						<view class="content-item-title"><text class="title-txt">告警信息展示</text></view>
					</template>
					<uni-table stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100">告警名称</uni-th>
							<uni-th width="70">告警类型</uni-th>
							<uni-th width="70">位置</uni-th>
							<uni-th width="70">状态</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list2" :key="index">
							<uni-td>{{item.name}}</uni-td>
							<uni-td>{{item.type}}</uni-td>
							<uni-td>{{item.position}}</uni-td>
							<uni-td>
								<text v-if="item.status" style="color: green;">已处理</text>
								<text v-else style="color: red;">待处理</text>
							</uni-td>
						</uni-tr>
					</uni-table>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1])
	const carInfo = ref({
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		dataLabel: true,
		enableScroll: false,
		legend: {
			show: false,
			position: "right",
			lineHeight: 25
		},
		title: {
			name: "950",
			fontSize: 27.5,
			color: "#666666"
		},
		subtitle: {
			name: "车辆总数",
			fontSize: 20,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				customRadius: 90,
				offsetAngle: -90,
				labelWidth: 0.01,
				border: true,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	})
	const carInfoData = ref({
		series: [{
			data: [{
				"name": "等待装车",
				"value": 102,
				labelText: "等待装车:102"
			}, {
				"name": "正在装车",
				"value": 104,
				labelText: "正在装车:104"
			}, {
				"name": "装车总数",
				"value": 151,
				labelText: "装车总数:151"
			}]
		}],
	})
	const carInfo1 = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [{
				min: 0
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 15,
				categoryGap: 10,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	})
	const carInfoData1 = ref({
		categories: ["一", "二", "三", "四", "五", "六", "日"],
		series: [{
			name: "吨",
			data: [350, 360, 310, 660, 330, 130, 340]
		}]
	})
	const carInfo2 = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 0, 15],
		enableScroll: false,
		legend: {
			show: true,
			position: "top"
		},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data: [{
				min: 0
			}]
		},
		extra: {
			line: {
				type: "straight",
				width: 2,
				activeType: "solid"
			}
		}
	})
	const carInfoData2 = ref({
		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
		series: [{
				legendShape: "line",
				name: "成交量A",
				data: [35, 8, 25, 37, 4, 20]
			},
			{
				legendShape: "line",
				name: "成交量B",
				data: [70, 40, 65, 100, 44, 68]
			},
			{
				legendShape: "line",
				name: "成交量C",
				data: [100, 80, 95, 150, 112, 132]
			}
		]
	})

	function setY1(opts, chartData) {
		const getMax = (prev, next) => {
			return next >= prev ? next : prev
		}
		opts.value.yAxis.data[0].max = 50 + chartData.value.series.reduce((prve, next) => {
			console.log(prve, next);
			const valNext = next.data.reduce(getMax)
			return valNext >= prve ? valNext : prve
		}, 0)
	}
	setY1(carInfo1, carInfoData1)
	setY1(carInfo2, carInfoData2)
	const list = ref([{
			carId: "新L97657",
			name: "矿卡",
			status: true,
			waitTime: "05:36"
		},
		{
			carId: "新L97657",
			name: "矿卡",
			status: true,
			waitTime: "05:36"
		},
		{
			carId: "新L97657",
			name: "矿卡",
			status: true,
			waitTime: "05:36"
		},
		{
			carId: "新L97657",
			name: "矿卡",
			status: true,
			waitTime: "05:36"
		},
	])
	const list1 = ref([{
			name: "025矿卡",
			type: "矿卡",
			code: "025",
			waitTime: true
		},
		{
			name: "025矿卡",
			type: "矿卡",
			code: "025",
			waitTime: true
		},
		{
			name: "025矿卡",
			type: "矿卡",
			code: "025",
			waitTime: true
		},
		{
			name: "025矿卡",
			type: "矿卡",
			code: "025",
			waitTime: true
		},
	])
	const list2 = ref([{
			name: "025矿卡",
			type: "矿卡",
			position: "025",
			status: true
		},
		{
			name: "025矿卡",
			type: "矿卡",
			position: "025",
			status: true
		},
		{
			name: "025矿卡",
			type: "矿卡",
			position: "025",
			status: true
		},
		{
			name: "025矿卡",
			type: "矿卡",
			position: "025",
			status: true
		},
	])
	// function rowToCol(lis,lebal=[]){
	// 	let returnData = {};
	// 	lebal.forEach(i=>returnData[i] = [])
	// 	lis.forEach((res,index)=>{
	// 		lebal.forEach((i)=>{
	// 			returnData[i][index] = res[i]
	// 		})
	// 	})
	// 	console.log(returnData);
	// 	return returnData;
	// }
	// const status = ref(rowToCol(list.value,['carId','name','status','waitTime']))
	// const status1 = ref(rowToCol(list1.value,['name','type','code','waitTime']))
	// const status2 = ref(rowToCol(list2.value,['name','type','position','status']))
</script>

<style scoped lang="scss">

</style>